<template>
	<view>

		<view class="tab_box">
			<u-tabs activeColor='#E34305' inactiveColor='#000' fontSize="30" :list="cate" :bold="true"
				:is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>

		<view style="height: 80rpx;"></view>

		<view class="list_box">
			<view class="info" v-for="(item,index) in list" :key="index">
				<view class="head">
					<view>报修单号:{{item.order_no}}</view>
					<view class="red">{{item.statusText}}</view>
				</view>
				<view class="center">
					<view class="f_s">

						<view class="c_right">
							<view class="name">{{item.ms}}</view>
						</view>
					</view>

					<view class="f_s">
						<view class="time">
							上报时间: {{item.createtime}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="btn" @click="$project.toPath('/pages/keep/winfo?id='+item.id)">查看详情</view>
					<view class="btn btn_blue" v-if="item.status==2" @click="start(item,index)">确认服务开始</view>
					<view class="btn btn_blue" v-if="item.status==3" @click="que(item,index)">服务完成</view>
				</view>
			</view>
		</view>

		<view class="bitmap" v-if="emptyShow">
			<image :src="none" mode="aspectFit"></image>
			<view class="gray_font fs-13">
				暂无报修
			</view>
		</view>

		<u-popup :closeable="true" v-model="show" mode="center" border-radius="14">
			<view class="form_box">

				<view class="xx_title">请填写处理说明</view>

				<view class="xx_box">
					<view class="input_box">
						<textarea class="ms" v-model="form.content" placeholder="请输入备注说明"
							placeholder-style="color:#CECECE"></textarea>
					</view>

				</view>

				<view class="xx_box">
					<view class="input_box">
						<view class="b_flex_c">
							<view class="img_text">上传图片/视频</view>
						</view>
						<view class="upload_box">
							<upload vmax='1' v-model="form.cimages"></upload>
						</view>
					</view>
				</view>

				<view class="dj_btn" @click="ques(e,index)">提交</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import upload from "@/components/upload.vue";
	export default {
		components: {
			upload
		},
		data() {
			return {
				current: 0,
				cate: [{
						id: 0,
						name: '全部'
					},
					{
						id: 2,
						name: '待服务'
					},
					{
						id: 3,
						name: '服务中'
					},
					{
						id: 4,
						name: '已完成'
					}
				],
				params: {
					page: 1,
					limit: 10,
					status: 0,
					token: ''
				},
				list: [],
				total: 0,
				emptyShow: false,
				none: '',
				show: false,
				e: '',
				index: '',
				form: {
					content: '',
					cimages: ''
				},
			}
		},
		onShow() {
			this.getList();
		},
		onLoad(e) {
			this.none = this.$imgUrl + 'assets/img/none_order.png';
			this.params.token = uni.getStorageSync('gdToken');
			if (e.status) {

				this.cate.forEach((res, index) => {
					if (e.status == res.id) {

						this.current = index;

					}
				});


				this.params.status = e.status;
			}
		},
		methods: {
			que(e, index) {
				this.e = e;
				this.index = index;
				this.show = true;
			},
			ques(e, index) {
				let _ = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认服务完成?',
					success: (res) => {
						if (res.confirm) {
							
							
							_.form.id=e.id;
							_.form.token=uni.getStorageSync('gdToken');
							
							_.$post(_.$api.keepQue,_.form, ress => {
								let {
									code,
									data,
									msg
								} = ress.data;
								_.$project.toast(msg);
								if (code == 1) {
                                    _.show=false;
									_.list[index].status = data.status;
									_.list[index].statusText = data.statusText;
									if (_.params.status > 0 && data.status != _.params.status) {
										_.list.splice(index, 1);
									}
                                    _.setShow();
								}
							});

						}
					}
				})
			},
			start(e, index) {
				let _ = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否确认开始服务?',
					success: (res) => {
						if (res.confirm) {

							_.$post(_.$api.keepStart, {
								id: e.id,
								token: uni.getStorageSync('gdToken')
							}, ress => {
								let {
									code,
									data,
									msg
								} = ress.data;
								_.$project.toast(msg);
								if (code == 1) {

									_.list[index].status = data.status;
									_.list[index].statusText = data.statusText;
									if (_.params.status > 0 && data.status != _.params.status) {
										_.list.splice(index, 1);
									}
									
									_.setShow();

								}
							});

						}
					}
				})
			},
			change(e) {
				console.log(e);
				this.current = e;
				this.params.status = this.cate[e].id;
				this.getList();
			},
			getList() {
				this.params.page = 1;
				this.$get(this.$api.keepWork, this.params, res => {
					let data = res.data;



					this.list = data.data.data;
					this.total = data.data.total;

					this.setShow();
				});
			},
			setShow() {
				if (!this.list || this.list.length < 1) {
					this.emptyShow = true;
				} else {
					this.emptyShow = false;
				}
			},
			onReachBottom() {
				if (this.list.length < this.total) {
					this.params.page++;
					this.$get(this.$api.keepWork, this.params, res => {
						let data = res.data;
						data.data.data.forEach(ress => {
							this.list.push(ress);
						});
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-tab-item {
		background-color: transparent !important;
		font-size: 30rpx !important;
	}

	.tab_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.list_box {
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.info {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 20rpx;

	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
	}

	.red {
		color: red;
	}

	.center {
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #eee;

	}

	.img {
		width: 35%;
		height: 240rpx;
		border-radius: 15rpx;
	}

	.c_right {
		width: 60%;
		text-align: left;
	}

	.name {
		font-weight: bold;
	}

	.time {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.m_box {
		font-size: 24rpx;
		text-align: right;

	}

	.money {
		font-size: 32rpx;
		color: red;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	}

	.btn {
		box-sizing: border-box;
		padding: 8rpx 25rpx;
		border: 1rpx solid black;
		font-size: 26rpx;
		border-radius: 25rpx;
		margin-left: 20rpx;
	}

	.btn_red {
		border: 1rpx solid red;
		color: red;
	}

	.btn_blue {
		border: 1rpx solid #E34305;
		color: #E34305;
	}

	.bitmap {
		margin-top: 10vh;
		text-align: center;
	}

	.f_s {
		display: flex;

		justify-content: space-between;
	}

	.f_c_s {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.free {
		color: red;
		text-align: right;
		margin-top: 40rpx;
	}

	.dj_btn {
		box-sizing: border-box;
		padding: 25rpx 0;
		border-radius: 10rpx;
		background-color: #E71B06;
		color: white;
		
		margin-top: 30rpx;
		text-align: center;
	}

	.form_box {
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		font-size: 28rpx;
	}

	.xx_box {
		box-sizing: border-box;
		padding: 0rpx 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.input_box {
		box-sizing: border-box;
		padding: 30rpx 0;
	}

	.img_text {
		margin-left: 10rpx;
	}

	.ms {
		height: 220rpx;
		border: 1rpx solid #E7E5E5;
		box-sizing: border-box;
		padding: 20rpx 0 0 20rpx;
	}

	.xx_title {
		text-align: center;
		font-weight: bold;
	}
</style>